<template>
	<view class="container">
		<navbar></navbar>
		<view class="left">
			<image src="/static/product/y1.png" mode="widthFix" class="center-img" alt="左侧图片"></image>
			<view class="product-desc">一站式云仓平台体系、整合资源、智能驱动，赋能企业供应链升级，夯实政府物流新基建！</view>
			<view class="agree">
				<label>
					<checkbox value="" /><text>已阅读并同意“运营商注册协议”</text>
				</label>
			</view>
		</view>

		<view class="right">
			<view class="form-title">运营商申请表单</view>

			<view class="form-group">
				<view class="form-label">运营商编码</view>
				<view class="form-input">
					<input v-model="formData.code" disabled="true" placeholder="请输入运营商编码" />
				</view>
			</view>

			<view class="form-group">
				<view class="form-label">运营商名称</view>
				<view class="form-input">
					<input v-model="formData.name" placeholder="请输入运营商名称" required />
				</view>
			</view>

			<view class="form-group">
				<view class="form-label">联系地址</view>
				<view class="form-input">
					<textarea v-model="formData.address" placeholder="请输入联系地址" rows="3"></textarea>
				</view>
			</view>

			<view class="form-group">
				<view class="form-label">联系电话</view>
				<view class="form-input">
					<input v-model="formData.telePhone" placeholder="请输入联系电话" type="tel" />
				</view>
			</view>

			<view class="form-group">
				<view class="form-label">电子邮箱</view>
				<view class="form-input">
					<input v-model="formData.email" placeholder="请输入电子邮箱" type="email" />
				</view>
			</view>
	
			<view class="form-actions">
				<button class="btn cancel" @click="resetForm">重置</button>
				<button class="btn submit" @click="submitForm">提交注册</button>
			</view>
		</view>

		<footbar></footbar>
	</view>
</template>

<script>
import { getRandomId } from '../../untils/getRandomId';
import { errForm, checkTelePhone } from '../../untils/errForm';
const CouldDB = uniCloud.importObject('getDb');
import navbar from '../../components/navbar.vue';
import footbar from '../../components/footbar.vue';
export default {
	components: {
		navbar,
		footbar
	},
	data() {
		return {
			adminView: '',
			formData: {
				code: getRandomId('UMS'),
				name: '',
				address: '',
				telePhone: '',
				email: '',
				admin: ''
			}
		};
	},
	methods: {
		// 重置表单
		resetForm() {
			this.formData = {
				code: '',
				name: '',
				address: '',
				telePhone: '',
				email: '',
				admin: ''
			};
		},
	

		// 提交表单
		async submitForm() {
			const errform = {
				name: '货主名称',
				address: '地址',
				telePhone: '联系电话',
				email: '邮箱',
				admin: '法人信息'
			};
			const err = errform(this.formData, errform);
			if (err.length > 0) {
				uni.showModal({
					title: '请完成必填项',
					content: `${err.map((e) => e.message).join('、')}`
				});
				return;
			}
			if (!checkTelePhone(this.formData.telePhone)) {
				return;
			}
			try {
				uni.showLoading({
					title: '提交中...'
				});
				const res = await CouldDB.addDB('supplier', this.formData);
				if (res) {
					uni.showToast({
						icon: 'success',
						title: '货主注册成功'
					});
					this.resetForm();
				} else {
					uni.showToast({
						title: '货主注册失败',
						icon: 'fail'
					});
				}
			} catch (e) {
				uni.showToast({
					title: '系统错误' + e,
					icon: 'fail'
				});
			} finally {
				uni.hideLoading();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	margin-top: 168rpx;
	width: 100vw;
	min-height: 100vh; /* 确保占满整个视图高度 */
	overflow: hidden; /* 隐藏容器自身滚动条 */
}

.left {
	display: flex;
	flex-direction: column;
	width: 40%; /* 左侧宽度可调整 */
	height: 100vh; /* 高度与视图一致 */
	display: flex;
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
	padding: 20rpx;
	background-color: #f5f5f5;
	/* 关键：固定在视图内，不随右侧滚动 */
	position: fixed;
	top:0;
	left: 0;
	align-self: flex-start;
	.product-desc{
		font-size: 35rpx;
		font-weight: 600;
		color: #333;
		margin: 40rpx;
	}
	.agree{
		font: 28rpx;
		font-weight: 600;
		color: #55aaff;
	}
}
.center-img {
	border-radius: 20rpx;
  width: 95%; /* 图片宽度充满左侧容器 */
  height: auto; /* 高度自动，保持比例 */
  object-fit: contain; /* 完整显示图片，不裁剪 */

}
.right {
	margin-left: 40%;
	width: 60%; /* 右侧宽度可调整 */
	height: 100vh; /* 高度与视图一致 */
	overflow-y: auto; /* 内容超出时显示垂直滚动条 */
	padding: 20rpx;
	background-color: #fff;
}

.form-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding: 40rpx 0;
}

.form-group {
	margin-bottom: 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-label {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 15rpx;
	font-weight: 500;
}

.form-input {
	position: relative;
}

.form-input input,
.form-input textarea {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 32rpx;
}

.form-input textarea {
	height: 200rpx;
	padding: 20rpx;
	resize: none;
}

.form-select,
.form-multi-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 32rpx;
	color: #666;
	position: relative;
	background-color: #fff;
}

.select-arrow {
	width: 32rpx;
	height: 32rpx;
}

.form-multi-select {
	min-height: 80rpx;
	flex-wrap: wrap;
}

.selected-tag {
	display: inline-flex;
	align-items: center;
	background-color: #e8f5e9;
	color: #4caf50;
	border-radius: 40rpx;
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
	margin-top: 10rpx;
	font-size: 28rpx;
}

.tag-close {
	width: 30rpx;
	height: 30rpx;
	margin-left: 10rpx;
}

.form-actions {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
}

.btn {
	flex: 1;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	margin: 0 20rpx;
}

.cancel {
	background-color: #f5f5f5;
	color: #666;
	border: 1rpx solid #ddd;
}

.submit {
	background-color: #55aaff;
	color: #fff;
	border: none;
}
</style>
